

  .main{
    padding: 0 50px;  
    width: 1920px;
    min-height: 100vh;
    height: 100%;
    .main_l{
      float: left;
      width: 1200px;
      .box1{
        width: 100%;
        height: 680px;
        background: url(../img/map.png) no-repeat center;
        background-size: 100% 100%;
        margin-bottom: 50px;   
        position: relative;
        .line{
          position: absolute;
          left: 230px;
          bottom: 39px;
          animation: blink 3s infinite;
        }  
       
        .icon1{
          display: none;
          position: absolute;
          left: 479px;
          top: 172px;          
        }  
        .icon2{
          display: none;
          position: absolute;
          left: 479px;
          top: 172px;
        }  
        .icon3{
          display: none;
          position: absolute;
          left: 479px;
          top: 172px;
        }  
        .active{
          display: block;
          opacity: 0;
          animation: blink 1.5s infinite;
        } 
      }
      .box2{
        width: 100%;
        height: 199px;
        background: url(../img/box1.png) no-repeat center;
        background-size: 100% 100%;
        box-sizing: border-box;
        padding: 20px 0 0 25px;
        .con{
          margin-top: 20px;
          height: 120px;
          overflow: hidden;
          li{
            height: 40px;
            .name{
              float: left;
              width: 88px;
              font-family: Source Han Sans CN;
              font-weight: 500;
              font-size: 18px;
              line-height: 26px;
              color: #9CC4FF;
            }
            .process{
              float: left;
              width: 950px;
              height: 10px;
              border-radius: 5px;
              background: #020D2E;
              margin-top: 10px;
              .bar{
                width: 0;
                height: 10px;     
                position: relative;
                // transition: width 0.5s linear;
                &::before{
                  content: '';
                  width: 100%;
                  background: linear-gradient(90deg, #395CFE 0%, #2EC5D0 100%);
                  border-radius: 5px;
                  position: absolute;
                  left: 0;
                  right: 0;
                  top: 0;
                  bottom: 0;
                  animation: dh 2s linear forwards;
                }
              }
            }
            .num{
              float: left;
              margin-left: 20px;
              font-family: Source Han Sans CN;
              font-weight: bold;
              font-size: 26px;
              line-height: 26px;
              color: #FFFFFF;
            }
          }
        }
      }
    }
    .main_r{
      float: left;
      width: 580px;
      height: 326px;
      margin-left: 40px;
      .box1{
        width: 100%;
        height: 181px;
        background: url(../img/box2.png) no-repeat center;
        background-size: 100% 100%;
        margin-bottom: 50px;
        box-sizing: border-box;
        padding: 28px 0 0 20px;
        .item{
          float: left;
          width: 264px;
          height: 127px;
          box-sizing: border-box;
          padding: 27px 0 0 135px;
          p{
            font-family: Source Han Sans CN;
          }
          .p1{
            font-weight: 400;
            font-size: 18px;
            line-height: 18px;
          }
          .p2{             
              font-weight: bold;
              font-size: 30px;
              line-height: 30px;
              color: #FFFFFF;
              margin-top: 22px;
          }
        }
        .item1{
          background: url(../img/bg4.png) no-repeat center;
          background-size: 100% 100%;
          .p1{           
            color: #70CFFF;
          }
        }
        .item2{
          background: url(../img/bg5.png) no-repeat center;
          background-size: 100% 100%;
          margin-left: 13px;
          .p1{
            color: #00FFFF;
          }
        }
      }
      .box2{
        width: 100%;
        height: 323px;
        background: url(../img/box3.png) no-repeat center;
        background-size: 100% 100%;
        margin-bottom: 50px;
        box-sizing: border-box;
        padding: 20px 0 0 25px;
        .con{
          margin-top: 22px;
        }
        .item{
          float: left;
          text-align: center;
          box-sizing: border-box;
          padding-top: 28px;
          .p1{
            font-family: Source Han Sans CN;
            font-weight: bold;
            font-size: 30px;
            line-height: 30px;
            color: #FFFFFF;
          }
          .p2{
            font-family: PingFang SC;
            font-weight: 500;
            font-size: 18px;
            line-height: 18px;
            color: #D4E4F2;
            margin-top: 14px;
          }
        }
        .item1{
          width: 164px;
          height: 106px;
          background: url(../img/bg2.png) no-repeat center;
          background-size: 100% 100%;
        }
        .item2{
          width: 254px;
          height: 105px;
          background: url(../img/bg3.png) no-repeat center;
          background-size: 100% 100%;
          margin-top: 18px;
        }
      }
      .box3{
        width: 100%;
        height: 326px;
        text-align: center;
        video{
          max-width: 100%;
          max-height: 100%;
        }
      }
    }
    .title{
      font-family: Alimama ShuHeiTi;
      font-weight: bold;
      font-size: 24px;
      color: #9CC4FF;
    } 
  }
    
  @keyframes blink {  
    0%, 100% {  
      opacity: 0.3; 
    }  
    50% {  
      opacity: 1; 
    }  
  }  
  @keyframes dh {  
    0% {  
     width: 0;
    }  
    100% {  
      width: 100%;
    }  
  }  